<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script src="highcharts/js/highcharts.js"></script>
<script src="highcharts/js/modules/exporting.js"></script>
</head>
<body>
<div id="container1" style="height: 300px"></div>
<div id="container2" style="height: 600px"></div>
<div id="container3" style="height: 300px"></div>
</body>

<script type="text/javascript">
// Internationalization
// Internationalization



// Column chart
function init_0()
{
    var options = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Active IP vs Inactive IP'
        },
        xAxis: {
            categories:[]
        },
        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of IPs'
            }
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        series:[{},{}]
};

 $.getJSON("ask.php?type=0",function(jdata) {
    var seriesArr = [];
    var series1;
    var series2;
    var d1;
    var d2;
    $.each(jdata[0], function(key, data) {
        if (key=="name"){
            d1=data;
        }
        if (key=="data"){
            d2=data;
        }
        
    })
    var d3;
    var series1={name:d1,data:d2};
    $.each(jdata[1], function(key, data) {
        if (key=="name"){
            d1=data;
        }
        if (key=="data"){
            d3=data;
        }
        
    })
    var categories=[];
    $.each(d3, function(key, data) {
        categories.push(data[0]);
        
    })
    //alert(categories);
    options.chart.renderTo = 'container1';
    options.chart.type = 'column';
    options.series[0].name="active";
    options.series[1].name="inactive";
    options.series[0].data=d2;
    options.series[1].data=d3;
    options.xAxis.categories=categories;
    var chart1 = new Highcharts.Chart(options);


    options.chart.renderTo = 'container2';
    options.chart.type = 'pie';
    options.series=[{}];
    options.series[0].name="Total";
    var d=[];
    var c=0
    for(var i in d2){
        //alert(d2[i][0]);
        c=c+parseInt(d2[i][1]);
    }
    d.push(["active",c]);
    var c=0
    for(var i in d3){
        //alert(d2[i][0]);
        c=c+parseInt(d3[i][1]);
    }
    d.push(["inactive",c]);
    options.series[0].data=d;
    options.xAxis.categories=categories;
    options.plotOptions={ pie: {
            events: {
                    click:function(event){
                        ////
    options.chart.renderTo = 'container2';
    options.chart.type = 'column';
    options.series=[{},{}];
    options.series[0].name="active";
    options.series[1].name="inactive";
    options.series[0].data=d2;
    options.series[1].data=d3;
    options.xAxis.categories=categories;
    var chart1 = new Highcharts.Chart(options);


                        //////

                    }
                }
    }
   };
    options.tooltip={};
    options.title.text="Total IP";
    var chart2 = new Highcharts.Chart(options);



    options.chart.renderTo = 'container3';
    options.chart.type = 'pie';
    options.series=[{}];
    options.series[0].name="Total";
    var d=[];
    for(var i in d2){
        //alert(d2[i][0]);
        var t=[];
        t.push(d2[i][0]);
        t.push(parseInt(d2[i][1])+parseInt(d3[i][1]));
        d.push(t);
    }
    options.series[0].data=d;
    options.xAxis.categories=categories;
    options.tooltip={};
    options.title.text="Total IP";
    var chart2 = new Highcharts.Chart(options);
    
})

}

function init_1()
{
    var options_0 = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Active IP vs Inactive IP'
        },
        xAxis: {
            categories:[]
        },
        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of IPs'
            }
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal+'<br/>'+
                    'Percentage: '+(this.point.y/this.point.stackTotal).toFixed(4)*100+'%';
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        series:[{},{}]
};

 $.getJSON("ask.php?type=1",function(jdata) {

    var tmp_total=[];
    var tmp_region=[];
    //var tmp_total_com=[];
    //var tmp_region_com=[];
    var reg_key={};
    $.each(jdata, function(key, data) {
        var tuple=data;
        var port=tuple[0];
        var region=tuple[1];
        var count=tuple[2];
        if(tmp_total[port]==null)
        {
            tmp_total[port]=0;
            //tmp_total_com[port]=0;
        }
        if(tmp_region[port]==null)
        {
            tmp_region[port]=[];
            var t=[region,count];
            tmp_region[port].push(t);

        }
        else{
            var t=[region,count];
            tmp_region[port].push(t);
        }
        reg_key[region]=0;
        //alert(region+''+reg_key);
        tmp_total[port]=tmp_total[port]+parseInt(count);
    })
    //alert(reg_key);

    var categories=[];

    var data=[]
    for(var i in tmp_total){
        //alert(d2[i][0]);
    
        categories.push(i);
        var t=[i,tmp_total[i]];
        data.push(t);
    }
    //var options=options_0;
    var t = JSON.stringify( options_0 );
    var options = JSON.parse( t );
    options.chart.renderTo = 'container1';
    options.chart.type = 'pie';
    options.title.text="Port ";
    options.tooltip={
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            };
    options.series=[{}];
    options.series[0].name="open port";
    options.series[0].data=data;
    options.xAxis.categories=categories;
    var chart1 = new Highcharts.Chart(options);
   

    var t = JSON.stringify( options_0 );
    var options = JSON.parse( t );
    var categories=[]
    options.series=[];
    var c=0;
    for(var i in reg_key){
        categories.push(i);
    }

    for(var i in tmp_region){
        //alert(d2[i][0]);
        options.series.push([]);
        options.series[c].name=i;
        options.series[c].data=tmp_region[i];
        c=c+1;
    }
    options.tooltip={
                formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal+'<br/>'+
                    'Percentage: '+(this.point.y/this.point.stackTotal).toFixed(4)*100+'%';
            }
            };
    options.chart.type = 'column';
    options.plotOptions.bar={
                stacking: 'normal'
            };
    options.chart.renderTo = 'container2';
    options.xAxis.categories=categories;
    var chart2 = new Highcharts.Chart(options);
    
})

}

init_1();



		</script>
	


</html>
